layui.define('my_send', function(exports){
    var $ = layui.$
    , http_proxy = layui.http_proxy;
  //实时报警
  $.ajax({
    type : "get",
    async : false, //异步执行
    url : http_proxy("/alarm/realTimeAlerts"),
    dataType : "json", //返回数据形式为json
    success : function(data) {
      var str = '';
      var data = data.data;
      for (var i = 0; i < data.length; i++) {
        if(data[i].alarmRank === 1){
          str += '<li class="alarmRank1">'+'<span class="name">'+ data[i].alarmSystem + data[i].alarmMessage +'</span>'+'' +
              '<span class="site">'+data[i].alarmLevel+'</span>'+'<span class="gsmc">'+ data[i].alarmTime+'</span>'+'</li>';
              $(".networkRealTime ul li").attr('style',"background-color:blue");
          }else if(data[i].alarmRank === 2){
              str += '<li class="alarmRank2">'+'<span class="name">'+ data[i].alarmSystem + data[i].alarmMessage +'</span>'+'' +
                  '<span class="site">'+data[i].alarmLevel+'</span>'+'<span class="gsmc">'+ data[i].alarmTime+'</span>'+'</li>';
                  $(".networkRealTime ul li").css("background-color","blue");
          }
          else if(data[i].alarmRank === 3){
            str += '<li class="alarmRank3">'+'<span class="name">'+ data[i].alarmSystem + data[i].alarmMessage +'</span>'+'' +
                '<span class="site">'+data[i].alarmLevel+'</span>'+'<span class="gsmc">'+ data[i].alarmTime+'</span>'+'</li>';
                $(".networkRealTime ul li").css("background-color","blue");
        }
        else if(data[i].alarmRank === 4){
          str += '<li class="alarmRank4">'+'<span class="name">'+ data[i].alarmSystem + data[i].alarmMessage +'</span>'+'' +
            '<span class="site">'+data[i].alarmLevel+'</span>'+'<span class="gsmc">'+ data[i].alarmTime+'</span>'+'</li>';
            $(".networkRealTime ul li").css("background-color","blue");
        }
      }
      $('.realTime ul').html( str);
    },
    error : function(errorMsg) {
      alert("请求数据失败");
    }
  });
  // 一周报警分级统计
  $.ajax({
    type : "get",
    async : false, //异步执行
    url : http_proxy("/alarm/alarmGradingStatistics"),
    dataType : "json", //返回数据形式为json
    success : function(data) {
      alarmGradingStation = data.data;
    },
    error : function(errorMsg) {
        alert("请求数据失败");
    }
  });
  // 一周服务运维统计
  $.ajax({
    type : "get",
    async : false, //异步执行
    url : http_proxy("/alarm/operationalStatistics"),
    dataType : "json", //返回数据形式为json
    success : function(data) {
      operationalStation = data.data;
      var list=[];
      for(var i=0;i< operationalStation.length;i++){
        list.push([ operationalStation[i].value]);
      }
      operationalStationlist=list
    },
    error : function(errorMsg) {
        alert("请求数据失败");
    }
  });
  
 // 车站故障TOP10
 $.ajax({
  type : "get",
  async : false, //异步执行
  url : http_proxy("/alarm/stationAlarmTop"),
  dataType : "json", //返回数据形式为json
  success : function(data) {
    stationAlarmTop = data.data;
  },
  error : function(errorMsg) {
      alert("请求数据失败");
  }
});
  // 分类统计
  // var dataList=[];
  // $.ajax({
  //   type : "get",
  //   async : false, //异步执行
  //   url : 'http://127.0.0.1:10090/top/cpu',
  //   dataType : "json", //返回数据形式为json
  //   success : function(data) {
  //    cpuData = data.data;
  //     for(var i=0;i< cpuData.length;i++){
  //       dataList.push( cpuData[i].value);
  //
  //
  //     }
  //     console.log(dataList);
  //   },
  //   error : function(errorMsg) {
  //     alert("请求数据失败");
  //   }
  // });
  // 接口状态
  $.ajax({
    type : "get",
    async : false, //异步执行
    url : http_proxy("/alarm/interfaceStatus"),
    dataType : "json", //返回数据形式为json
    success : function(data) {
      var data = data.data;
      var list = new Array();
      for(var i=0;i<data.length;i++){
        var map=new Map();
        map.name=data[i].name;
        if(data[i].value==1){
          map.category=0;
          map.active=true;
          map.speed=" ";
        }else if(data[i]==0){
          map.category=1;
          map.active=false;
          map.speed="";
        }
        map.value=[0,i*100];
        list.push(map);
      }
      this.InterfaceStateList = list;
      this.show=true
    },
    error : function(errorMsg) {
      alert("请求数据失败");
    }
  });
// 一周报警分级统计
var myChart = echarts.init(document.getElementById("pieDiagram"));
option = {
  // backgroundColor: "#606266",
  // color: ["#00BFFF"],
  series: [
     // 故障占比7%
    {
      type: "pie",
      center: ["15%", "26%"],
      radius: ["30%", "35%"],
      label: {
        normal: {
          position: "center"
        }
      },
      data: [
        {
          value: alarmGradingStation[0].value[0],
          itemStyle: {
            normal: {
              color: "#ff0000"
            }
          },
          label: {
            normal: {
              formatter: "{d} %",
              textStyle: {
                color: "#ff0000",
                fontSize: 16
              }
            }
          }
        },
        {
          value: 100-alarmGradingStation[0].value[0],
          tooltip: {
            show: false
          },
          label: {
            normal: {
              textStyle: {
                color: "#ff0000",
                fontSize: 16
              }
            }
          }
        }
      ]
    },
    // 故障占比30%
    {
      type: "pie",
      center: ["35%", "26%"],
      radius:  ["30%", "35%"],
      label: {
        normal: {
          position: "center"
        }
      },
      data: [
        {
          value:alarmGradingStation[0].value[1],
          itemStyle: {
            normal: {
              color: "#ffb402"
            }
          },
          label: {
            normal: {
              formatter: "{d} %",
              textStyle: {
                color: "#ffb402",
                fontSize: 16
              }
            }
          }
        },
        {
          value:100-alarmGradingStation[0].value[1],
          tooltip: {
            show: false
          },
          label: {
            normal: {
              textStyle: {
                color: "#ffb402",
                fontSize: 16
              }
            }
          }
        }
      ]
    },
    // 故障处理率100%
     {
      type: "pie",
      center: ["15%", "76%"],
      radius: ["30%", "35%"],
      label: {
        normal: {
          position: "center"
        }
      },
      data: [
        {
          value: alarmGradingStation[1].value[0],
          itemStyle: {
            normal: {
              color: "#00B150"
            }
          },
          label: {
            normal: {
              formatter: "{d} %",
              textStyle: {
                color: "#00B150",
                fontSize: 16
              }
            }
          }
        },
        {
          value: 100-alarmGradingStation[1].value[0],
          tooltip: {
            show: false
          },
          label: {
            normal: {
              textStyle: {
                color: "#00B150",
                fontSize: 16
              }
            }
          }
        }
      ]
    },
    // 故障处理率75%
     {
      type: "pie",
      center: ["35%", "76%"],
      radius: ["30%", "35%"],
      label: {
        normal: {
          position: "center"
        }
      },
      data: [
        {
          value: alarmGradingStation[1].value[1],
          itemStyle: {
            normal: {
              color: "#00B150"
            }
          },
          label: {
            normal: {
              formatter: "{d} %",
              textStyle: {
                color: "#00B150",
                fontSize: 16
              }
            }
          }
        },
        {
          value: 100-alarmGradingStation[1].value[1],
          tooltip: {
            show: false
          },
          label: {
            normal: {
              textStyle: {
                color: "#00B150",
                fontSize: 16
              }
            }
          }
        }
      ]
    }
  ]
};
 myChart.setOption(option);

  // 一周服务运维统计
var myChart = echarts.init(document.getElementById('operationalStation'));
var option = {
  // backgroundColor: "#0D2A42",
  title: [{
      text: operationalStation[0].name,
      textStyle: {
      fontSize: 15,
      color: "#606266"
      },
      left: "11%",
      top: "80%",
      textAlign: "center",
      textBaseAlign: "middle"
  },
  {
      text: operationalStation[1].name,
      textStyle: {
      fontSize: 15,
      color: "#606266"
      },
      left: "36%",
      top: "80%",
      textAlign: "center",
      textBaseAlign: "middle"
  },
  {
      text:operationalStation[2].name,
      textStyle: {
      fontSize: 15,
      color: "#606266"
      },
      left: "61%",
      top: "80%",
      textAlign: "center",
      textBaseAlign: "middle"
  },
  {
      text: operationalStation[3].name,
      textStyle: {
      fontSize: 15,
      color: "#606266"
      },
      left: "86%",
      top: "80%",
      textAlign: "center",
      textBaseAlign: "middle"
  }],
  series: [
    {
      type: "liquidFill",
      data: operationalStationlist[0],
      radius: "55%",
      // 水球颜色
      color: ["#436EEE"],
      center: ["12%", "45%"],
      // 内图 背景色 边
      backgroundStyle: {
        color: "#0D2A42"
      },
      label: {
        normal: {
          textStyle: {
            color: 'white',
            insideColor: 'white',
            fontSize: 20
          }
        }
      }
    },
    {
      type: "liquidFill",
      data: operationalStationlist[1],
      radius: "55%",
      // 水球颜色
      color: ["#436EEE"],
      center: ["37%", "45%"],
      // 内图 背景色 边
      backgroundStyle: {
        color: "#0D2A42"
      },
      label: {
        normal: {
          textStyle: {
            color: 'white',
            insideColor: 'white',
            fontSize: 20
          }
        }
      }
    },
    {
      type: "liquidFill",
      data: operationalStationlist[2],
      radius: "55%",
      // 水球颜色
      color: ["#436EEE"],
      center: ["62%", "45%"],
      // 内图 背景色 边
      backgroundStyle: {
        color: "#0D2A42"
      },
      label: {
        normal: {
          textStyle: {
            color: 'white',
            insideColor: 'white',
            fontSize: 20
          }
        }
      }
    },
    {
      type: "liquidFill",
      data: operationalStationlist[3],
      radius: "55%",
      // 水球颜色
      color: ["#436EEE"],
      center: ["87%", "45%"],
      // 内图 背景色 边
      backgroundStyle: {
        color: "#0D2A42"
      },
      label: {
        normal: {
          textStyle: {
            color: 'white',
            insideColor: 'white',
            fontSize: 20
          }
        }
      }
    }
  ]
};
myChart.setOption(option);
  // 车站故障TOP10
  var stationAlarm = echarts.init(document.getElementById('stationAlarm'));
  var option;
  option = {
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      axisLine: {
        lineStyle: {
            color:'#3398DB',
            width:'1'
        }
      },
      axisLabel: {
        interval:0,
        textStyle: {
            color: '车站故障'
        }
      },
      data:stationAlarmTop.xData,
      axisTick: {
        alignWithLabel: true,
        lineStyle:{
          color : '#3398DB',	
        }
      }
    }],
    yAxis: [{
      name: "（数量）",
      type: 'value',
      nameTextStyle: {
          color: "#606266",
          fontSize: 16
      },
      type: 'value',
      axisLine: {
        lineStyle: {
            color:'#3398DB',
            width:'1'
        }
      },
      axisLabel: {
        textStyle: {
            color: '#606266'
        }
      },
    }],
    series: [{
      name: '站点',
      type: 'bar',
      barWidth: '50%',
      data:stationAlarmTop.yData
    }]
  };
  stationAlarm.setOption(option);


  // 分类统计
  var classificationStatistics = echarts.init(document.getElementById('classificationStatistics'));
  var classificationStatisticsOption  = {
    title: [
        {
          text: 'CPU TOP3',
          x: "25%",
          y: "7%",
          textStyle: {
            fontSize: 12,
            color: "#606266"
          }
        },
        {
          text:'磁盘 TOP3',
          x: "25%",
          y: "57%",
          textStyle: {
            fontSize: 12,
            color: "#606266"
          }
        },
        {
          text:'流量 TOP3',
          x: "75%",
          y: "7%",
          textStyle: {
            fontSize: 12,
            color: "#606266"
          }
        },
       
        {
          text:'内存 TOP3',
          x: "75%",
          y: "57%",
          textStyle: {
            fontSize: 12,
            color: "#606266"
          }
        }
      ],
      // backgroundColor: "#0D2A42",
      ////grid开始/////
      grid: [
        {
          x: "4%",
          y: "14%",
          width: "40%",
          height: "35%",
          containLabel: true
        },
        {
          //b
          x: "54%",
          y: "14%",
          width: "40%",
          height: "35%",
          containLabel: true
        },
        {
          //c
          x: "4%%",
          y: "64%",
          width: "40%",
          height: "35%",
          containLabel: true
        },
        {
          //d
          x: "54%",
          y: "64%",
          width: "40%",
          height: "35%",
          containLabel: true
        }
      ],

      ////xAxis开始/////
      xAxis: [
        {
          name: "%",
          splitNumber: 5,
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#606266"
            }
          },
          max: 100
        },
        {
          name: "%",
          gridIndex: 1,
          splitNumber: 5,
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#606266"
            }
          },
          max: 100
        },
        {
          name: "%",
          gridIndex: 2,
          splitNumber: 5,
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#606266"
            }
          },
          max: 100
        },
        {
          name: "%",
          gridIndex: 3,
          splitNumber: 5,
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#606266"
            }
          },
          max: 100
        }
      ],

      ////yAxis开始/////
      yAxis: [
        {
          inverse: true,
          axisLabel: {
            interval: 0
          },
          axisLine: {
            lineStyle: {
              color: "#606266"
            }
          },
          data: ['历史服务器1','历史服务器2','实时服务器1']
        },
        {
          inverse: true,
          gridIndex: 1,
          axisLabel: {
            interval: 0
          },
          axisLine: {
            lineStyle: {
              color: "#606266"
            }
          },
          data: ['历史服务器1','历史服务器2','实时服务器1']
        },
        {
          inverse: true,
          gridIndex: 2,
          axisLabel: {
            interval: 0
          },
          axisLine: {
            lineStyle: {
              color: "#606266"
            }
          },
          data: ['历史服务器1','历史服务器2','实时服务器1']
        },
        {
          inverse: true,
          gridIndex: 3,
          axisLabel: {
            interval: 0
          },
          axisLine: {
            lineStyle: {
              color: "#606266"
            }
          },
          data: ['历史服务器1','历史服务器2','实时服务器1']
        }
      ],

      tooltip: {
        formatter: function(parmes) {
          return parmes.name + " : " + parmes.value;
        }
      },

      series: [
        /////////bar开始/////////////
        {
          //a
          name: "CPU",
          type: "bar",
          data:[26.2, 25.8, 20.9],
          label: {
            show: true,
            position: "right",
            align: "left",
            color:"#606266"
          },
          itemStyle: {
            color: "#DC143C"
          }
        },
        {
          //d
          name: "磁盘",
          type: "bar",
          xAxisIndex: 1,
          yAxisIndex: 1,
          data:[7.86, 7.73, 7.33],
          label: {
            show: true,
            position: "right",
            align: "left",
            color:"#606266"
          },
          itemStyle: {
            color: "#DC143C "
          }
        },
        {
          //c
          name: "流量",
          type: "bar",
          xAxisIndex: 2,
          yAxisIndex: 2,
          data:[93.8, 64.3, 56.4],
       
          label: {
            show: true,
            position: "right",
            align: "left",
            color:"#606266"
          },
          itemStyle: {
            color: "#DC143C"
          }
        },
        
        {
          //b
          name: "内存",
          type: "bar",
          xAxisIndex: 3,
          yAxisIndex: 3,
          data:[24.6, 20.3, 19.6],
          label: {
            show: true,
            position: "right",
            align: "left",
            color:"#606266"
          },
          itemStyle: {
            color: "#DC143C"
          }
        }
      ]
  }
  classificationStatistics.setOption(classificationStatisticsOption);

// 接口状态
var sendDataChart = echarts.init(document.getElementById('sendData'));
const targetCoord = [1000, 600]
const curveness = 0.2
const linesData = []
const categories = [{
    name: '流入中',
    itemStyle: {
        normal: {
            color: "#01acca"
        }
    },
    label: {
        normal: {
            fontSize: "10",
        }
    }
}, {
    name: '暂无流入',
    itemStyle: {
        normal: {
          color: "#ff0000"
        }
    },
    label: {
        normal: {
            fontSize: "4"
        }
    }
}]

const item = {
    name: "CIOS",
    value: targetCoord,
    symbolSize: 50,
    itemStyle: {
      normal: {
        color: "#157eff"
      }
    },
    label: {
      normal: {
        fontSize: "14",
        color: "#157eff"

      }
    }
}
const items = [{
    name: "PA",
    category: 0,
    active: true,
    speed: '50kb/s',
    value: [0, 0]
}, {
    name: "BAS",
    category: 0,
    active: true,
    speed: '50kb/s',
    value: [0, 200]
}, {
    name: "EMCS",
    category: 0,
    active: true,
    speed: '50kb/s',
    value: [0, 400]
}, {
    name: "FAS",
    category: 0,
    active: true,
    speed: '50kb/s',
    value: [0, 600]
}, {
    name: "PSCADA",
    category: 0,
    active: true,
    speed: '50kb/s',
    value: [0, 800]
}, {
    name: "MCS",
    category: 0,
    active: true,
    speed: '50kb/s',
    value: [0, 1000]
}, {
    name: "CCTV",
    category: 0,
    active: true,
    speed: '50kb/s',
    value: [0, 1200]
}]

const data = items.concat([item])

items.forEach(function(el) {
    if (el.active) {
        linesData.push([{
            coord: el.value
        }, {
            coord: targetCoord
        }])
    }
})

const links = items.map((el) => {
    return {
        source: el.name,
        target: item.name,
        speed: el.speed,
        lineStyle: {
            normal: {
                color: el.speed ? '#12b5d0' : '#ff0000',
                curveness: curveness,
            }
        },
    }
})

option = {
    legend: [{
        formatter: function(name) {
            return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
        },
        tooltip: {
            show: true
        },
        textStyle: {
            color: '#606266'
        },
        selectedMode: false,
        right: 0,
        data: categories.map(function(el) {
            return el.name
        })
    }],
    xAxis: {
        show: false,
        type: 'value'
    },
    yAxis: {
      inverse: true,
      show: false,
      type: 'value'
    },
    series: [{
        type: 'graph',
        layout: 'none',
        coordinateSystem: 'cartesian2d',
        symbolSize: 20,
        z: 3,
        edgeLabel: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: 14
                },
                formatter: function(params) {
                    let txt = ''
                    if (params.data.speed !== undefined) {
                        txt = params.data.speed
                    }
                    return txt
                },
            }
        },
        label: {
            normal: {
                show: true,
                position: 'bottom',
                color: '#606266'
            }
        },
        itemStyle: {
            normal: {
                shadowColor: 'none'
            },
            emphasis: {}
        },
        lineStyle: {
            normal: {
                width: 2,
                shadowColor: 'none'
            },
        },
        edgeSymbol: ['none', 'arrow'],
        edgeSymbolSize: 8,
        data: data,
        links: links,
        categories: categories
    }, {
        name: 'A',
        type: 'lines',
        coordinateSystem: 'cartesian2d',
        z: 1,
        effect: {
            show: true,
            smooth: false,
            trailLength: 0,
            symbol: "arrow",
            color: 'rgba(55,155,255,0.5)',
            symbolSize: 12
        },
        lineStyle: {
            normal: {
                curveness: curveness
            }
        },
        data: linesData
    }]
}
    // 使用刚指定的配置项和数据显示图表。
    sendDataChart.setOption(option);

    $(function() {
      var $this = $(".realTime");
      var scrollTimer;
      $this.hover(function() {
          clearInterval(scrollTimer);
      }, function() {
          scrollTimer = setInterval(function() {
              scrollContent($this);
          }, 0);
      }).trigger("mouseout");
  });
 
  function scrollContent(obj) {
      var $self = obj.find("ul:first");
      var lineHeight = $self.find("li:first").height() + 10; //获取行高
      $self.animate({
          "margin-top": -lineHeight + "px"
      }, 1000, function() {
          $self.css({
              "margin-top": "0px"
          }).find("li:first").appendTo($self); //appendTo能直接移动元素而不是复制，被appendto的元素位置发生变化
      })
  }
  exports('home', {})
});



  
  